<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/serverUrl.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">实验室</h1>
			<span id="more" class=""></span>
		</header>
		<!-- 弹出菜单 -->
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a id="addPc" href="#">添加电脑</a>
				</li>
				<li class="mui-table-view-cell">
					<a id="changeGonggao" href="#">修改实验室公告</a>
				</li>
				<li class="mui-table-view-cell">
					<a id="showUser" href="#">查看本实验室在线用户</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<div class="mui-content">
			<!-- 电脑列表 -->
			<ul class="mui-table-view" id="computerList">
				<!-- 通过AJAX加载电脑列表 -->
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		mui.plusReady(function() {
			var cw = plus.webview.currentWebview();
			var labID = cw.labID;

			//显示实验室公告
			mui.toast(cw.description);

			// 判断是学生用户还是教师用户，是否显示管理员功能
			if (localStorage.getItem("teacher") == "true") {
				document.getElementById("more").classList.add("mui-icon");
				document.getElementById("more").classList.add("mui-icon-plusempty");
				document.getElementById("more").classList.add("mui-pull-right");
			}
			
			//more按钮点击事件
			document.getElementById("more").onclick = function(){
				mui('#sheet1').popover('toggle');
			};
			
			//修改实验室公告
			document.getElementById("changeGonggao").onclick = function() {
				mui('#sheet1').popover('toggle');//弹出的菜单变为隐藏
				mui.openWindow({
					url: "changeGonggao.html",
					createNew: false, //不允许重复创建
					extras: { //给子页面传值
						labID: labID
					},
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 100
					}
				});
			};
			
			//添加电脑
			document.getElementById("addPc").onclick = function() {
				mui('#sheet1').popover('toggle');//弹出的菜单变为隐藏
				mui.prompt("请填写添加的数量", "数量", '添加电脑', ['取消', '确定'], function(e) {
					if (e.index == 1) {
						var addpcJson = {
							user: JSON.parse(localStorage.getItem("userInformation")),
							labID: labID,
							computerNumber: e.value
						};

						$.ajax({
							//请求方式
							type: 'POST',
							dataType: 'json',
							url: serverUrl + "creatComputers",
							headers: {
								'Content-Type': 'application/json;charset=utf-8'
							},
							data: JSON.stringify(addpcJson),
							//请求成功
							success: function(data) {
								if (data == "success") {
									mui.toast("添加成功！");
									mui.back();
								} else {
									mui.toast(data);
								}
							},
							//请求失败，包含具体的错误信息
							error: function(e) {
								mui.toast("遇到了未知错误！");
							}
						});
					}
				}, 'div');
			};
			
			//显示当前实验室的在线用户
			document.getElementById("showUser").onclick = function() {
				mui('#sheet1').popover('toggle');//弹出的菜单变为隐藏
				mui.openWindow({
					url: "showUser.html",
					createNew: false, //不允许重复创建
					extras: { //给子页面传值
						labID: labID
					},
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 100
					}
				});
			};

			// 获取电脑列表
			var computerJson = {};
			computerJson.user = JSON.parse(localStorage.getItem("userInformation"));
			computerJson.labID = parseInt(labID);
			computerJson.pageNum = 1;
			computerJson.pageSize = 100;
			$.ajax({
				//请求方式
				type: 'POST',
				dataType: 'json',
				url: serverUrl + "getLabComputers",
				headers: {
					'Content-Type': 'application/json;charset=utf-8'
				},
				data: JSON.stringify(computerJson),
				//请求成功
				success: function(data) {
					// 将json转化为列表项
					var computerList = "";
					var flag = "";
					for (var i = 0; i < data.length; i++) {
						// 通过json中state判断电脑状态
						if (data[i].state == 0) {
							flag = "mui-badge-success";
						} else if (data[i].state == -1) {
							flag = "";
						} else if (data[i].state >= 1) {
							flag = "mui-badge-primary";
						}
						computerList = computerList + "<li class='mui-table-view-cell' flag='"+ flag +"' id='" + data[i].pcID +
							"' >" + data[i].pcNum + "号电脑<span class='mui-badge "+ flag +"'>&nbsp;&nbsp;</span></li>";
					}
					document.getElementById("computerList").innerHTML = computerList;
				},
				//请求失败，包含具体的错误信息
				error: function(e) {
					mui.toast("遇到了未知错误！");
				}
			});
		});
		
		//点击有问题电脑，将电脑恢复到正常状态
		mui(".mui-content").on("tap", ".mui-table-view-cell", function(e) {
			var pcID = this.getAttribute("id");
			var flag = this.getAttribute("flag");
			
			if (flag == "" && localStorage.getItem("teacher") == "true") { //如果点击的是可申请的实验室,则打开申请对话框
		
				// 确认对话框
				var queRen = confirm("是否将电脑设为正常？");
				if(queRen == true){
					var pcJson = {
						user: JSON.parse( localStorage.getItem("userInformation") ),
						id:pcID
					};
					$.ajax({
						//请求方式
						type: 'POST',
						dataType: 'json',
						url: serverUrl + "repareComputer",
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						data: JSON.stringify(pcJson),
						//请求成功
						success: function(data) {
							if (data == "success") {
								window.location.reload();
							} else{
								mui.toast(data);
							}
						},
						//请求失败，包含具体的错误信息
						error: function(e) {
							mui.toast("遇到了未知错误！");
						}
					});
				}
			}else if(flag == "mui-badge-success"){
				mui.toast("该电脑可使用，请在首页扫码签到。");
			}else if(flag == "mui-badge-primary"){
				mui.toast("该电脑已被占用。");
			}
		});
	</script>
</html>
